<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="自动归档" name="first">
        <wise-crud ref="wise-crud" :urls="urls" :fields="fields" :handle="handle" :filters="filters">
          <template v-slot:handle="slotProps">
            <el-button v-if="slotProps.row.qualifiedStatus !== 2" type="danger" size="small" class="activeBtn" round
              @click.native.prevent="removeHandle(slotProps.row)">
              删除
            </el-button>
            <el-button type="info" size="small" class="activeBtn" round
              @click.native.prevent="viewHandle(slotProps.row)">查看</el-button>
          </template>
        </wise-crud>
      </el-tab-pane>
      <el-tab-pane label="手动归档" name="second">
        <Artificial v-if="activeName==='second'" :type="2" />
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="查看" :visible.sync="dialog" width="40%">
      <table id="printMe" border="1" width="95%" style="border-collapse: collapse; margin: auto">
        <tr>
          <td colspan="2">防腐</td>
        </tr>
        <tr>
          <td>标题</td>
          <td>{{ obj.title }}</td>
        </tr>
        <tr>
          <td>时间</td>
          <td>{{ obj.ct | dateFormat("YYYY-MM-DD HH:mm:ss") }}</td>
        </tr>
        <tr>
          <td>检测单位</td>
          <td>{{ obj.monitorUnitInfo ? obj.monitorUnitInfo.name : "" }}</td>
        </tr>
        <tr>
          <td>检测人</td>
          <td>{{ obj.userInfo.username }}</td>
        </tr>

        <tr>
          <td>描述</td>
          <td>{{ obj.content }}</td>
        </tr>
        <tr>
          <td>状态</td>
          <!-- <td>{{ obj.qualifiedStatus === 2 ? "合格" : "/不合格" }}</td> -->
          <td v-if="obj.qualifiedStatus === 0 ">待确认</td>
          <td v-if="obj.qualifiedStatus === 1 ">不合格</td>
          <td v-if="obj.qualifiedStatus === 2 ">合格</td>
        </tr>
        <tr>
          <td>审核人</td>
          <td>{{ obj.confirmUserInfo ? obj.confirmUserInfo.username : "" }}</td>
        </tr>
        <tr v-if="obj.image">
          <td>图片</td>
          <td>
            <el-image v-for="(img, i) in imgList" v-if="imgList.length > 0" :key="i" class="image" fit="cover"
              alt="点击查看大图" :src="img | imgPath" style="margin-left: 10px" :preview-src-list="getSrcList(obj.image)" />
            <el-image v-if="imgList.length==0" class="image" fit="cover" alt="点击查看大图" :src="obj.image | imgPath"
              :preview-src-list="getSrcList(obj.image)" />
          </td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button v-print="{
            id: 'printMe',
            popTitle: ''
          }" type="primary">打 印</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import WiseCrud from '@/components/Crud/wiseCrud'
  import {
    postHandle
  } from '@/api'
  import {
    imgPath
  } from '@/filters'
  import Artificial from '../components/Artificial.vue'
  export default {
    name: 'WarehouseManage',
    components: {
      WiseCrud,
      Artificial
    },
    data() {
      return {
        activeName: 'first',
        imgList: [],
        handle: [],
        urls: {
          list: '/api/v1/welder-sbtx-second/detection-comb/list',
          show: '/api/v1/welder-sbtx-second/detection-comb/show/',
          delete: '/api/v1/welder-sbtx-second/detection/remove/'
        },
        fields: [{
            label: '标题',
            prop: 'title',
            type: 'text',
            use: ['table']
          },
          {
            label: '检测时间',
            prop: 'ct',
            type: 'datetime',
            format: 'YYYY-MM-DD HH:mm:ss',
            use: ['table']
          },
          {
            label: '检测人',
            prop: 'userInfo.username',
            type: 'text',
            use: ['table']
          },
          {
            label: '确认人员',
            prop: 'confirmUserInfo.username',
            type: 'text',
            use: ['table']
          },
          {
            label: '状态',
            type: 'render',
            use: ['table'],
            tableRender: (h, row, index) => {
              let textHtml = ''
              if (row.qualifiedStatus == 0) {
                textHtml = '待确认'
              } else if (row.qualifiedStatus == 1) {
                textHtml = '不合格'
              } else if (row.qualifiedStatus == 2) {
                textHtml = '合格'
              }
              return h('div', textHtml)
            }
          },
          {
            label: '操作',
            type: 'handle',
            use: ['table'],
            handle: [],
            tableWidth: 140
          }
        ],
        dialog: false,
        obj: {
          monitorUnitInfo: {
            name: null
          },
          qualifiedStatus: null,
          image: '',
          title: null,
          content: null,
          userInfo: {
            username: null
          },
          confirmUserInfo: {
            username: null
          }
        }
      }
    },
    computed: {
      spaceId() {
        return this.$store.getters.spaceId
      },
      filters() {
        return [{
            field: 'spaceId',
            operator: 'EQUALS',
            value: this.spaceId
          },
          {
            field: 'type',
            operator: 'EQUALS',
            value: 2
          }
        ]
      }
    },
    methods: {
      viewHandle({
        id
      }) {
        this.getObjectId(id)
        this.dialog = true
      },
      getObjectId(id) {
        postHandle(this.urls.show + id).then(res => {
          this.obj = res.result
          this.imgList = []
          let a = this.obj.image.match(/;/g)
          if (a != null) {
            let b = res.result.image.split(';')
            b.length = b.length - 1
            for (let i in b) {
              this.imgList.push(b[i])
            }
          }
        })
      },
      getSrcList(str) {
        let arr = []
        if (str) {
          arr = str.split(';')
        }
        return arr.map(item => imgPath(item))
      },
      removeHandle({
        id
      }) {
        this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            postHandle(this.urls.delete + id).then(res => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.$refs['wise-crud'].handleSearch(0)
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  table {
    text-align: center;

    td {
      padding: 20px 0;
    }
  }

  .image {
    width: 100px;
    height: 100px;
  }
</style>